<style scoped>
.contain {
  background: #fff;
  border: 1px solid #e5ebec;
  padding: 20px;
  color: #000;
}
.studyDetails {
  padding: 10px;
  border: 1px solid #e5ebec;
}
.studyDetails span {
  padding-left: 5px;
}
.studyDetails h4,.studyDetails p{
    padding:10px 0;
    word-wrap: break-word
}
.ivu-layout {
  padding: 20px;
}
</style>

<template>
  <div style="background:#f5f7f9;width:100%;">
    <Layout>
      <div class="contain">
        <div class="studyDetails">
          <h4>{{studyDetails.name}}</h4>
          <p>
            cancer_study_identifier :
            <span>{{studyDetails.cancer_study_identifier}}</span>
          </p>
          <p>
            citation :
            <span>{{studyDetails.citation}}</span>
          </p>
          <p>
            description :
            <span>{{studyDetails.description}}</span>
          </p>
          <p>
            groups :
            <span>{{studyDetails.groups}}</span>
          </p>
          <p>
            pmid :
            <span>{{studyDetails.pmid}}</span>
          </p>
          <p>
            short_name :
            <span>{{studyDetails.short_name}}</span>
          </p>
          <p>
            type_of_cancer :
            <span>{{studyDetails.type_of_cancer}}</span>
          </p>
        </div>
      </div>
    </Layout>
  </div>
</template>
<script>
import { varca } from "@/api/index";
export default {
  data() {
    return {
        studyDetails:{}
    };
  },
  methods: {
    getstudyData() {
      let obj = {
        id: this.$store.state.studyId
      };
      varca.findStudyById(obj).then(res => {
        if (res.status == 200) {
          this.studyDetails = res.data;
        }else if(res.status == 203){
          this.getstudyData()
        }
      });
    }
  },
  mounted(){
      this.getstudyData()
  }
};
</script>
